import React, { createContext, useReducer } from 'react'

export const ColorContext = createContext({})

export const UPDATE_COLOR = 'UPDATE_COLOR'

export const Color = (props) => {
    const reducerColor = (state, action) => {
        switch (action.type) {
            case UPDATE_COLOR:
                return (state = action.color)
            default:
                return state
        }
    }

    const [color, dispatch] = useReducer(reducerColor, 'blue')

    return <ColorContext.Provider value={{ color, dispatch }}>{props.children}</ColorContext.Provider>
}
